<template>
	<div class="main-page">
		<div class="page-header">
			<div class="page-header-title">
				辽宁省房地产市场监测系统 —— 商品房交易
			</div>
			<div class="page-header-filtrate">
				<public-change-province-city :cityList="mapList" :currentCity="cityObj.code" @changeCity="changeCity" />
				<month-range-time-filtrate-public :monthRange="monthRange" class="page-header-filtrate-month-range"
					@changeFiltrateTime="changeMonthRange" />
			</div>
			<div class="bcak-home-btn"><router-link :to="{ name: 'propertyWatch' }">返回首页</router-link></div>
		</div>
		<div class="page-main">
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">新建商品房销售面积</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab1 === 1 }" @click="itemTab(1, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab1 === 2 }" @click="itemTab(1, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate1.totalMoney }}</span>万m²</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate1.totalMoneyTb }}</span>%</div>
					</div>
					<barLinePublic v-if="echarData1.xAxisData.length > 0" :housingSupplyStatsData="echarData1"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">新建商品住宅销售面积</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab2 === 1 }" @click="itemTab(2, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab2 === 2 }" @click="itemTab(2, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate2.totalMoney }}</span>万m²</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate2.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData2.xAxisData.length > 0" :housingSupplyStatsData="echarData2"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">二手房交易面积</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab3 === 1 }" @click="itemTab(3, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab3 === 2 }" @click="itemTab(3, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate3.totalMoney }}</span>万m²</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate3.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData3.xAxisData.length > 0" :housingSupplyStatsData="echarData3"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">二手住宅交易面积</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab4 === 1 }" @click="itemTab(4, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab4 === 2 }" @click="itemTab(4, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate4.totalMoney }}</span>万m²</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate4.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData4.xAxisData.length > 0" :housingSupplyStatsData="echarData4"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title t-bg">
					<div class="page-item-title-left">各城市新建商品房销售面积排名</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab13 === 1 }"
							@click="itemTab(13, 1)">
							总量</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab13 === 2 }"
							@click="itemTab(13, 2)">
							增速</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class=" tabsRank">
						<div class="tabsRank-item" :class="{ 'tabRankActive': tabRank1 === item.value }"
							v-for="(item, index) in tabsCityRank" :key="index" @click="tabRankSelect1(item.value)">{{
								item.title }}</div>
					</div>
					<barLinePublic v-if="echarData13.xAxisData.length > 0" :housingSupplyStatsData="echarData13"
						class="echarH1" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">新建商品房销售额</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab5 === 1 }" @click="itemTab(5, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab5 === 2 }" @click="itemTab(5, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate5.totalMoney }}</span>亿元</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate5.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData5.xAxisData.length > 0" :housingSupplyStatsData="echarData5"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">新建商品住宅销售额</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab6 === 1 }" @click="itemTab(6, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab6 === 2 }" @click="itemTab(6, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate6.totalMoney }}</span>亿元</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate6.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData6.xAxisData.length > 0" :housingSupplyStatsData="echarData6"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">二手房交易额</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab7 === 1 }" @click="itemTab(7, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab7 === 2 }" @click="itemTab(7, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate7.totalMoney }}</span>亿元</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate7.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData7.xAxisData.length > 0" :housingSupplyStatsData="echarData7"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">二手住宅交易额</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab8 === 1 }" @click="itemTab(8, 1)">
							当月</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab8 === 2 }" @click="itemTab(8, 2)">
							累计</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class="page-item-info">
						<div class="item-cont-info-left">累计:<span>{{ langSellMoneyRate8.totalMoney }}</span>亿元</div>
						<div class="item-cont-info-right">同比:<span>{{ langSellMoneyRate8.totalMoneyTb }}</span>%
						</div>
					</div>
					<barLinePublic v-if="echarData8.xAxisData.length > 0" :housingSupplyStatsData="echarData8"
						class="echarH" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title t-bg">
					<div class="page-item-title-left">各城市新建商品房销售额排名</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab14 === 1 }"
							@click="itemTab(14, 1)">
							总量</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab14 === 2 }"
							@click="itemTab(14, 2)">
							增速</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class=" tabsRank">
						<div class="tabsRank-item" :class="{ 'tabRankActive': tabRank2 === item.value }"
							v-for="(item, index) in tabsCityRank" :key="index" @click="tabRankSelect2(item.value)">{{
								item.title }}</div>
					</div>
					<barLinePublic v-if="echarData14.xAxisData.length > 0" :housingSupplyStatsData="echarData14"
						class="echarH1" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">新建商品房销售均价</div>
					<div class="page-item-title-right">
					</div>
				</div>
				<div class="page-item-cont">
					<barLinePublic v-if="echarData9.xAxisData.length > 0" :housingSupplyStatsData="echarData9"
						class="echarH2" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">新建商品住宅销售均价</div>
					<div class="page-item-title-right">
					</div>
				</div>
				<div class="page-item-cont">
					<barLinePublic v-if="echarData10.xAxisData.length > 0" :housingSupplyStatsData="echarData10"
						class="echarH2" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">二手房交易均价</div>
					<div class="page-item-title-right">
					</div>
				</div>
				<div class="page-item-cont">
					<barLinePublic v-if="echarData11.xAxisData.length > 0" :housingSupplyStatsData="echarData11"
						class="echarH2" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title">
					<div class="page-item-title-left">二手住宅交易均价</div>
					<div class="page-item-title-right">
					</div>
				</div>
				<div class="page-item-cont">
					<barLinePublic v-if="echarData11.xAxisData.length > 0" :housingSupplyStatsData="echarData12"
						class="echarH2" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
			<div class="page-item">
				<div class="page-item-title t-bg">
					<div class="page-item-title-left">各城市新建商品房销售均价排名</div>
					<div class="page-item-title-right">
						<div class="page-item-title-right-tab" :class="{ 'active': tab15 === 1 }"
							@click="itemTab(15, 1)">
							总量</div>
						<div class="page-item-title-right-tab" :class="{ 'active': tab15 === 2 }"
							@click="itemTab(15, 2)">
							增速</div>
					</div>
				</div>
				<div class="page-item-cont">
					<div class=" tabsRank">
						<div class="tabsRank-item" :class="{ 'tabRankActive': tabRank3 === item.value }"
							v-for="(item, index) in tabsCityRank" :key="index" @click="tabRankSelect3(item.value)">{{
								item.title }}</div>
					</div>
					<barLinePublic v-if="echarData15.xAxisData.length > 0" :housingSupplyStatsData="echarData15"
						class="echarH1" style="height: 100%;" @dialogData="dialogData"></barLinePublic>
				</div>
			</div>
		</div>
		<div class="page-recored-box">
			<dv-border-box-8 :dur="60">
				<div class="record-head">
					<div class="record-head-title">新建商品房交易合同网签备案数据</div>
					<div class="record-head-link" @click="goLink()">
						进入四房网签系统
					</div>
				</div>
				<div class="record-main">
					<div class="record-main-list" v-for="(item, index) in recordData" :key="index">
						<div class="record-list-img">
							<img :src="getAssetsFile(item.img)" alt="" />
						</div>
						<div class="record-list-info">
							<div class="record-list-info-title">{{ item.title }}</div>
							<div class="record-list-info-foot">
								<div class="record-list-info-foot-data">{{ item.data }}</div>
								<div class="record-list-info-foot-unit">{{ item.unit }}</div>
							</div>
						</div>
					</div>
				</div>
			</dv-border-box-8>
		</div>
		<magnify v-if="magnifyEchartData" :housingSupplyStatsData="magnifyEchartData" @closeDialog="closeDialog">
		</magnify>
	</div>
</template>


<script setup lang="ts">
import { onMounted, reactive, ref, onUnmounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute()
import publicChangeProvinceCity from "@/components/landSupply/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/landSupply/timeFiltratePublic.vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import barLinePublic from "@/components/landSupply/barLinePbulic.vue";
import magnify from "@/components/public/magnify.vue";

import {
	selectProjectBuildingTotal,
	selectProjectDwellingTotal,
	selectEsProjectBuildingTotal,
	selectEsProjectDwellingTotal,
	selectProjectBuildingSort,
	selectPriceArea,
} from "@/api/landSupply";
import { relative } from "path";

const cityObj = ref<any>({
	name: '',
	code: '210000'
}) // 地图-城市code信息
const mapList = ref([
	{ name: '辽宁省', code: '210000' },
	{ name: '沈阳市', code: '210100' },
	{ name: '大连市', code: '210200' },
	{ name: '鞍山市', code: '210300' },
	{ name: '抚顺市', code: '210400' },
	{ name: '本溪市', code: '210500' },
	{ name: '丹东市', code: '210600' },
	{ name: '锦州市', code: '210700' },
	{ name: '营口市', code: '210800' },
	{ name: '阜新市', code: '210900' },
	{ name: '辽阳市', code: '211000' },
	{ name: '盘锦市', code: '211100' },
	{ name: '铁岭市', code: '211200' },
	{ name: '朝阳市', code: '211300' },
	{ name: '葫芦岛市', code: '211400' }
])
const monthRange = ref<any>([])
const startTime = ref<any>(null)
const endTime = ref<any>(null)
const magnifyEchartData = ref(null)//弹框
const tabsCityRank = ref([
	{ title: '全部', value: 1 },
	{ title: '新建商品房', value: 2 },
	{ title: '新建商品住宅', value: 3 },
	{ title: '二手房', value: 4 },
	{ title: '二手住宅', value: 5 },
])
const recordData = ref([//新建商品房交易合同网签备案数据
	// { img: 'recordList1.png', title: '成交套数', data: '0', unit: '套' },
	{ img: 'recordList2.png', title: '新建商品房销售面积', data: '0', unit: '万m²' },
	{ img: 'recordList3.png', title: '新建商品房销售金额', data: '0', unit: '亿元' },
	{ img: 'recordList4.png', title: '新建商品房销售均价', data: '0', unit: '元/m²' },
])
const intervalId = ref<any>(null)
//新建商品房
const tab1 = ref(1)
const echarData1 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate1 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab5 = ref(1)
const echarData5 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate5 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab9 = ref(2)
const echarData9 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate9 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
//新建商品住宅
const tab2 = ref(1)
const echarData2 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate2 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab6 = ref(1)
const echarData6 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate6 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab10 = ref(2)
const echarData10 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate10 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
//二手房交易
const tab3 = ref(1)
const echarData3 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate3 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab7 = ref(1)
const echarData7 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate7 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab11 = ref(2)
const echarData11 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate11 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
//二手住宅交易
const tab4 = ref(1)
const echarData4 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate4 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab8 = ref(1)
const echarData8 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate8 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab12 = ref(2)
const echarData12 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate12 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
//各城市新建商品房销售面积排名
const tab13 = ref(1)
const echarData13 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate13 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab14 = ref(1)
const echarData14 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate14 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tab15 = ref(1)
const echarData15 = ref({
	xAxisData: <any>[],
})
const langSellMoneyRate15 = reactive({
	totalMoney: 0,
	totalMoneyTb: 0
})
const tabRank1 = ref(1)
const tabRank2 = ref(1)
const tabRank3 = ref(1)
//新建商品房销售面积
const selectProjectBuildingTotalArea = async () => {
	let { data } = await selectProjectBuildingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab1.value, unitType: 1 })
	langSellMoneyRate1.totalMoney = data.totalMoney
	langSellMoneyRate1.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：万m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData1.value = paramsData;
}
//新建商品房销售额
const selectProjectBuildingTotalSale = async () => {
	let { data } = await selectProjectBuildingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab5.value, unitType: 2 })
	langSellMoneyRate5.totalMoney = data.totalMoney
	langSellMoneyRate5.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData5.value = paramsData;
}
//新建商品房销售均价
const selectProjectBuildingTotalPrice = async () => {
	let { data } = await selectProjectBuildingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab9.value, unitType: 3 })
	langSellMoneyRate9.totalMoney = data.totalMoney
	langSellMoneyRate9.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 5,
		top: 45,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：元/m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData9.value = paramsData;
}
//新建商品住宅销售面积
const selectProjectDwellingTotalArea = async () => {
	let { data } = await selectProjectDwellingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab2.value, unitType: 1 })
	langSellMoneyRate2.totalMoney = data.totalMoney
	langSellMoneyRate2.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：万m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData2.value = paramsData;
}
//新建商品住宅销售额
const selectProjectDwellingTotalSale = async () => {
	let { data } = await selectProjectDwellingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab6.value, unitType: 2 })
	langSellMoneyRate6.totalMoney = data.totalMoney
	langSellMoneyRate6.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData6.value = paramsData;
}
//新建商品住宅销售均价
const selectProjectDwellingTotalPrice = async () => {
	let { data } = await selectProjectDwellingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab10.value, unitType: 3 })
	langSellMoneyRate10.totalMoney = data.totalMoney
	langSellMoneyRate10.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 5,
		top: 45,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：元/m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData10.value = paramsData;
}
//二手房销售面积
const selectEsProjectBuildingTotalArea = async () => {
	let { data } = await selectEsProjectBuildingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab3.value, unitType: 1 })
	langSellMoneyRate3.totalMoney = data.totalMoney
	langSellMoneyRate3.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：万m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData3.value = paramsData;
}
//二手房销售额
const selectEsProjectBuildingTotalSale = async () => {
	let { data } = await selectEsProjectBuildingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab7.value, unitType: 2 })
	langSellMoneyRate7.totalMoney = data.totalMoney
	langSellMoneyRate7.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData7.value = paramsData;
}
//二手房销售均价
const selectEsProjectBuildingTotalPrice = async () => {
	let { data } = await selectEsProjectBuildingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab11.value, unitType: 3 })
	langSellMoneyRate11.totalMoney = data.totalMoney
	langSellMoneyRate11.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 5,
		top: 45,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：元/m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData11.value = paramsData;
}
//二手住宅交易面积
const selectEsProjectDwellingTotalArea = async () => {
	let { data } = await selectEsProjectDwellingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab4.value, unitType: 1 })
	langSellMoneyRate4.totalMoney = data.totalMoney
	langSellMoneyRate4.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：万m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData4.value = paramsData;
}
//二手住宅交易额
const selectEsProjectDwellingTotalSale = async () => {
	let { data } = await selectEsProjectDwellingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab8.value, unitType: 2 })
	langSellMoneyRate8.totalMoney = data.totalMoney
	langSellMoneyRate8.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData8.value = paramsData;
}
//二手住宅交易均价
const selectEsProjectDwellingTotalPrice = async () => {
	let { data } = await selectEsProjectDwellingTotal({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, type: tab12.value, unitType: 3 })
	langSellMoneyRate12.totalMoney = data.totalMoney
	langSellMoneyRate12.totalMoneyTb = data.totalMoneyTb
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 5,
		top: 45,
	};
	let paramsData = barLineParamsData(
		['总量', '同比'],
		data.x,
		[
			{
				name: "单位：元/m²",
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData12.value = paramsData;
}
//各城市新建商品房销售 面积排名 
const selectProjectBuildingSortArea = async () => {
	let { data } = await selectProjectBuildingSort({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, categoryType: tab13.value, unitType: 1, sortType: tabRank1.value })
	langSellMoneyRate13.totalMoney = data.totalMoney
	langSellMoneyRate13.totalMoneyTb = data.totalMoneyTb
	const unit = tab13.value == 1 ? '单位：万m²' : '单位：%'
	const unit1 = tab13.value == 1 ? '总量' : '增速'
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 30,
	};
	let paramsData = barLineParamsData(
		[unit1],
		data.x,
		[
			{
				name: unit,
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#FFAF03",
				b: "#FFAF03",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData13.value = paramsData;
}
//各城市新建商品房销售 交易额排名 
const selectProjectBuildingSortSale = async () => {
	let { data } = await selectProjectBuildingSort({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, categoryType: tab14.value, unitType: 2, sortType: tabRank2.value })
	langSellMoneyRate14.totalMoney = data.totalMoney
	langSellMoneyRate14.totalMoneyTb = data.totalMoneyTb
	const unit = tab14.value == 1 ? '单位：万m²' : '单位：%'
	const unit1 = tab14.value == 1 ? '总量' : '增速'
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 30,
	};
	let paramsData = barLineParamsData(
		[unit1],
		data.x,
		[
			{
				name: unit,
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#FFAF03",
				b: "#FFAF03",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData14.value = paramsData;
}
//各城市新建商品房销售 均价排名 
const selectProjectBuildingSortPrice = async () => {
	let { data } = await selectProjectBuildingSort({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value, categoryType: tab15.value, unitType: 3, sortType: tabRank3.value })
	langSellMoneyRate15.totalMoney = data.totalMoney
	langSellMoneyRate15.totalMoneyTb = data.totalMoneyTb
	const unit = tab15.value == 1 ? '单位：万m²' : '单位：%'
	const unit1 = tab15.value == 1 ? '总量' : '增速'
	let legendStyle = {
		show: false,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 10,
		bottom: 10,
		top: 30,
	};
	let paramsData = barLineParamsData(
		[unit1],
		data.x,
		[
			{
				name: unit,
				type: "1",
			},
			{
				name: "",
				type: "2",
			},
		],
		[
			{
				name: "bar",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '2',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1,
		],
		[
			{
				a: "#FFAF03",
				b: "#FFAF03",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	echarData15.value = paramsData;
}
//右边3个tab切换1
const tabRankSelect1 = (i: number) => {
	tabRank1.value = i
	selectProjectBuildingSortArea()
}
//右边3个tab切换2
const tabRankSelect2 = (i: number) => {
	tabRank2.value = i
	selectProjectBuildingSortSale()
}
//右边3个tab切换3
const tabRankSelect3 = (i: number) => {
	tabRank3.value = i
	selectProjectBuildingSortPrice()
}
//切换tab
const itemTab = (index: any, type: any) => {
	switch (index) {
		case 1:
			tab1.value = type
			selectProjectBuildingTotalArea()
			break;
		case 2:
			tab2.value = type
			selectProjectDwellingTotalArea()
			break;
		case 3:
			tab3.value = type
			selectEsProjectBuildingTotalArea()
			break;
		case 4:
			tab4.value = type
			selectEsProjectDwellingTotalArea()
			break;
		case 5:
			tab5.value = type
			selectProjectBuildingTotalSale()
			break;
		case 6:
			tab6.value = type
			selectProjectDwellingTotalSale()
			break;
		case 7:
			tab7.value = type
			selectEsProjectBuildingTotalSale()
			break;
		case 8:
			tab8.value = type
			selectEsProjectDwellingTotalSale()
			break;
		case 9:
			tab9.value = type
			selectProjectBuildingTotalPrice()
			break;
		case 10:
			tab10.value = type
			selectProjectDwellingTotalPrice()
			break;
		case 11:
			tab11.value = type
			selectEsProjectBuildingTotalPrice()
			break;
		case 12:
			tab12.value = type
			selectEsProjectDwellingTotalPrice()
			break;
		case 13:
			tab13.value = type
			selectProjectBuildingSortArea()
			break;
		case 14:
			tab14.value = type
			selectProjectBuildingSortSale()
			break;
		case 15:
			tab15.value = type
			selectProjectBuildingSortPrice()
			break;
		default:
	}
}
//新建商品房交易合同网签备案数据
const selectPriceAreaGet = async () => {
	let { data } = await selectPriceArea({ xzqhdm: cityObj.value.code, startTime: startTime.value, endTime: endTime.value })
	recordData.value[0].data = data.spfxsmj
	recordData.value[1].data = data.spfxse
	recordData.value[2].data = data.spfpjxsjg
}
//跳转四房网
const goLink = () => {
	window.open('http://192.168.30.223:8021/#/login?redirect=%2Findex')
}
//时间
const changeMonthRange = (time: any) => {
	console.log(time)
	startTime.value = time[0]
	endTime.value = time[1]
	allFun()
}
//城市
const changeCity = (city: any) => {
	cityObj.value.code = city
	allFun()
}
//动态引入图片
const getAssetsFile = (url: string) => {
	return new URL(`../../assets/img/landSupply/${url}`, import.meta.url).href
}
// 打开弹框
const dialogData = (val: null) => {
	magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val: any) => {
	magnifyEchartData.value = null
}
const allFun = () => {
	selectProjectBuildingTotalArea()
	selectProjectDwellingTotalArea()
	selectEsProjectBuildingTotalArea()
	selectEsProjectDwellingTotalArea()
	selectProjectBuildingTotalSale()
	selectProjectDwellingTotalSale()
	selectEsProjectBuildingTotalSale()
	selectEsProjectDwellingTotalSale()
	selectProjectBuildingTotalPrice()
	selectProjectDwellingTotalPrice()
	selectEsProjectBuildingTotalPrice()
	selectEsProjectDwellingTotalPrice()
	selectProjectBuildingSortArea()
	selectProjectBuildingSortSale()
	selectProjectBuildingSortPrice()
	selectPriceAreaGet()
}

onMounted(() => {
	startTime.value = route.query.startTime
	endTime.value = route.query.endTime
	monthRange.value = [startTime.value, endTime.value]
	cityObj.value.code = route.query.xzqhdm
	allFun()
	//每分钟请求一次商品房交易合同网签备案数据
	intervalId.value = setInterval(selectPriceAreaGet, 60000);
})
onUnmounted(() => {
	clearInterval(intervalId.value); // 清除定时器
});
</script>

<style scoped lang="less">
.main-page {
	width: 100vw;
	height: 100vh;
	background-image: url("@/assets/img/landSupply/pageBg.png");
	background-size: 100% 100%;
	color: #fff;
	overflow: auto;

	// 隐藏滚动条
	&::-webkit-scrollbar {
		width: 0px;
	}

	.page-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 100px;
		background-image: url("@/assets/img/landSupply/headBg.png");
		background-size: 100% 100%;

		&-title {
			position: absolute;
			left: 50px;
			font-size: 35px;
			color: #A6EDFF;
			text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
		}

		&-filtrate {
			position: relative;
			display: flex;
			align-items: center;
			top: 15px;
			left: 150px;

			.filtrate-city {
				width: 120px;

				/deep/ .el-select__wrapper {
					font-size: 15px;
				}

				margin-right: 30px;
			}

			.page-header-filtrate-month-range {

				/deep/ .el-range-input,
				/deep/ .el-range-separator {
					font-size: 15px;
					font-weight: lighter;
				}
			}
		}

		.bcak-home-btn {
			position: absolute;
			top: 52px;
			right: 50px;
			font-size: 20px;
			color: #7bebed;
			cursor: pointer;
		}

		a {
			color: #7bebed;
		}
	}

	.page-recored-box {
		background: url("@/assets/img/landSupply/recoreBg.png");
		background-size: 100% 100%;
		height: 190px;
		margin: 22px 20px 27px 25px;

		.record-head {
			display: flex;
			margin-left: 30px;
			padding-top: 8px;
			align-items: center;

			.record-head-title {
				font-weight: bold;
				font-size: 24px;
				height: 43px;
				line-height: 43px;
			}

			.record-head-link {
				margin-left: 20px;
				height: 30px;
				display: flex;
				align-items: center;
				font-weight: 600;
				font-size: 14px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #2187F4;
				border: 1px solid #218BD0;
				padding: 0px 8px;
				border-radius: 3px;
			}
			.record-head-link:hover{
				cursor: pointer;
			}

		}

		.record-main {
			display: flex;
			margin: 23px 89px;
			justify-content: space-between;

			.record-main-list {
				display: flex;

				.record-list-img {
					width: 142px;
					height: 100px;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.record-list-info {
					flex-direction: column;
					display: flex;
					justify-content: space-between;
					margin-left: 27px;
					padding: 5px 0px;

					.record-list-info-title {
						font-weight: bold;
						font-size: 20px;
						color: #60F9F4;
						line-height: 26px;
					}

					.record-list-info-foot {
						display: flex;
						align-items: flex-end;

						.record-list-info-foot-data {
							font-weight: 500;
							font-size: 30px;
							color: #FFFFFF;
						}

						.record-list-info-foot-unit {
							font-size: 16px;
							color: #60F9F4;
							line-height: 33px;
							margin-left: 16px;
						}
					}
				}
			}
		}
	}

	.page-main {
		width: 100vw;
		margin-top: 15px;
		height: calc(100vh - 332px -190px);
		display: grid;
		grid-template-columns: 300px 300px 300px 300px 608px;
		grid-template-rows: 230px 230px 230px;
		padding-left: 25px;
		padding-right: 25px;
		gap: 17px;

		.page-item {
			.page-item-title {
				background-image: url("@/assets/img/landSupply/transItemTitle.png");
				background-size: 100% 100%;
				height: 30px;
				display: flex;
				justify-content: space-between;

				.page-item-title-left {
					font-weight: bold;
					font-size: 18px;
					padding-left: 25px;
				}

				.page-item-title-right {
					display: flex;

					.page-item-title-right-tab {
						font-weight: 600;
						font-size: 14px;
						color: #FFFFFF;
						width: 43px;
						height: 23px;
						background: rgba(33, 135, 244, 0.2);
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.page-item-title-right-tab.active {
						background: #2187F4;
						border: 1px solid #218BD0;
					}

					.page-item-title-right-tab:hover {
						cursor: pointer;
					}
				}
			}

			.page-item-title.bigTitle {
				background-image: url("@/assets/img/landSupply/transItemTitleBig.png");
			}

			.page-item-info {
				display: flex;
				justify-content: center;
				font-size: 16px;
				font-weight: 500;
				height: 16px;
				padding-top: 7px;

				.item-cont-info-left {
					margin-right: 20px;
				}

				.item-cont-info-right {
					margin-left: 20px;
				}
			}

			.tabsRank {
				justify-content: flex-end !important;
				margin-right: 10px;
				display: flex;

				.tabsRank-item {
					height: 20px;
					margin-top: 10px;
					box-shadow: inset 0px 0px 8px 0px #3D7FFF;
					border-radius: 4px;
					border: 1px solid #0839A7;
					font-size: 10px;
					color: #FFFFFF;
					line-height: 17px;
					padding: 0px 5px;
					margin-right: 5px;
				}

				.tabsRank-item:hover {
					cursor: pointer;
				}

				.tabsRank-item.tabRankActive {
					line-height: 17px;
					background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
					box-shadow: inset 0px 0px 8px 0px #3D7FFF;
				}
			}

			.echarH {
				height: 185px !important;
			}

			.echarH1 {
				height: 170px !important;
			}

			.echarH2 {
				height: 190px !important;
			}

			.page-item-cont {
				background-image: url("@/assets/img/landSupply/transItemCont.png");
				background-size: 100% 100%;
				height: 200px;
			}
		}
	}

}

.t-bg {
	background-image: url("@/assets/img/landSupply/tBg.png") !important;
}

.e-height {
	height: 391px;
}

:deep(.el-tabs) {
	display: flex;
	align-items: center;

	.el-tabs__header {
		margin: 0;
	}

	.el-tabs__nav-wrap:after {
		height: 0;
	}

	.el-tabs__active-bar {
		height: 0;
	}

	.el-tabs__item {
		width: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		font-size: 12px;
		height: 20px;
		cursor: pointer;
		color: white;
		background: rgb(9, 31, 63);
	}

	.el-tabs__item.is-active {
		background: #2187F4;
	}
}

:deep(.el-date-editor) {
	opacity: 1;
}

/deep/ .el-dialog {
	background-color: rgb(6, 37, 69);

	.el-dialog__title {
		font-size: 30px;
		color: white;
	}

	.el-dialog__close {
		color: white;
		font-size: 25px;
	}
}
</style>
